<template>
  <div>
    <el-dialog title="查看明细" :visible.sync="dialogVisible" width="80%">
      <el-table :data="orderData" border class="orderTable">
        <el-table-column label="订单信息" align="center">
          <el-table-column property="trade_no" label="订单编号" align="center" />
          <el-table-column property="pay_type" label="支付方式" align="center" />
          <el-table-column label="租期" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.month_total">{{ scope.row.month_total }}期</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="租期金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent_total != 0">￥{{ scope.row.rent_total }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="用户已付金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_total_rent != 0">￥{{ scope.row.paid_total_rent }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="is_risk" label="是否风控" align="center" />
          <el-table-column property="financing_type" label="是否上链融资" align="center" />
          <el-table-column label="保险费用" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.insure_fee != 0">￥{{ scope.row.insure_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="退款信息" align="center">
          <el-table-column label="退款金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.refund_amount != 0">￥{{ scope.row.refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="total_service_fee" label="应付总手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.total_service_fee != 0">￥{{ scope.row.total_service_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="paid_service_fee" label="已付手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_service_fee != 0">￥{{ scope.row.paid_service_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="deduct_service_fee" label="应补足手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_service_fee != 0">￥{{ scope.row.deduct_service_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column property="deduct_refund_amount" label="应补足退款金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_refund_amount != 0">￥{{ scope.row.deduct_refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="需补足总额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_amount != 0" class="red-font bold-font">￥{{ scope.row.deduct_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="centerDiv" @click="clickShow">
        <p>展开查看明细</p>
        <img src="../../../../assets/images/pullDown.png" alt="">
      </div>
      <el-table v-if="isShow" :data="rateData" border class="rateTable" :summary-method="getSummaries" show-summary>
        <el-table-column label="账单支付明细" align="center">
          <el-table-column label="期数" align="center">
            <template slot-scope="scope">
              <span>第{{ scope.row.which_period }}期</span>
            </template>
          </el-table-column>
          <el-table-column property="pay_type" label="支付方式" align="center" />
          <el-table-column property="settle_status_name" label="结算状态" align="center" />
          <el-table-column property="pay_status" label="支付状态" align="center" />
          <el-table-column label="租期金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent != 0">￥{{ scope.row.rent }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="实付金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.rent != 0">￥{{ scope.row.rent }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="手续费率" align="center">
          <el-table-column label="合同" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.smartcontract_amount != 0">￥{{ scope.row.smartcontract_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="实名认证" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.realname_amount != 0">￥{{ scope.row.realname_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="代扣" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.withhold_rate != 0">{{ scope.row.withhold_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="存证" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.file_rate != 0">{{ scope.row.file_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="平台手续费" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.platform_rate != 0">{{ scope.row.platform_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="保险" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.insure_rate != 0">{{ scope.row.insure_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="总费率" align="center" width="120px">
            <template slot-scope="scope">
              <span v-if="scope.row.which_period == 1 && scope.row.fixed_amount != 0">￥{{ scope.row.fixed_amount }}+</span>
              <span v-if="scope.row.shop_rate != 0">{{ scope.row.shop_rate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="结算手续费信息" align="center">
          <el-table-column label="结算金额" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.settle_amount != 0">￥{{ scope.row.settle_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应付手续费" align="center" property="payable_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.payable_fee != 0">￥{{ scope.row.payable_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="已付手续费" align="center" property="paid_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.paid_fee != 0">￥{{ scope.row.paid_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="退款信息" align="center">
          <el-table-column label="退款金额" align="center" width="110px" property="refund_amount">
            <template slot-scope="scope">
              <span v-if="scope.row.refund_amount != 0">￥{{ scope.row.refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应补足手续费" align="center" width="110px" property="deduct_fee">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_fee != 0" class="red-font bold-font">￥{{ scope.row.deduct_fee }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column label="应补足退款金额" align="center" width="110px" property="deduct_refund_amount">
            <template slot-scope="scope">
              <span v-if="scope.row.deduct_refund_amount != 0" class="red-font bold-font">￥{{ scope.row.deduct_refund_amount }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { orderRefundTransData, orderRefundDetail } from '@/api/orderRefund'
export default {
  // props: ["refundId"],
  props: {
    refundId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      orderData: [],
      rateData: [],
      isShow: false,
      sum: {
        total_deduct_amount: '',
        total_deduct_fee: '',
        total_paid_fee: '',
        total_payable_fee: '',
        total_refund_amount: ''
      },
    };
  },
  methods: {
    clickShow() {
      this.isShow = !this.isShow
    },
    getData() {
      orderRefundDetail(this.refundId).then((res) => {
        this.sum = res
        this.rateData = [{}]
        for (var i in res) {
          this.$set(this.rateData, i, res[i])
        }
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        switch (column.property) {
          case 'payable_fee':
            sums[index] = this.sum.total_payable_fee != 0 ? '￥' + this.sum.total_payable_fee : '--'
            break;
          case 'paid_fee':
            sums[index] = this.sum.total_paid_fee != 0 ? '￥' + this.sum.total_paid_fee : '--'
            break;
          case 'refund_amount':
            sums[index] = this.sum.total_refund_amount != 0 ? '￥' + this.sum.total_refund_amount : '--'
            break;
          case 'deduct_fee':
            sums[index] = this.sum.total_deduct_fee != 0 ? '￥' + this.sum.total_deduct_fee : '--'
            break
          case 'deduct_refund_amount':
            sums[index] = this.sum.total_deduct_amount != 0 ? '￥' + this.sum.total_deduct_amount : '--'
            break
          default:
            break
        }
      })
      return sums
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        orderRefundTransData(this.refundId).then((res) => {
          this.orderData = [{}]
          for (var i in res) {
            this.$set(this.orderData[0], i, res[i])
          }
        });
        this.getData()
      }
    }
  }
}
</script>

<style lang="scss" scope>
.orderTable {
  margin-top: 20px;
}

.rateTable {
  margin: 30px 0 70px;
}

.centerDiv {
  text-align: center;
  margin: 50px 0 30px;
  cursor: pointer;

  p {
    font-size: 16px;
    color: #2993ff;
    margin-bottom: 15px;
    user-select: none;
  }

  img {
    width: 27px;
    height: 11px;
  }
}
</style>
